<template>
  <div id="app">
      <input type="text" placeholder="输入城市/景点f游玩主题
    "> 昌吉<br/>
<br/>
<div id="lunbo">
<span style="color:#fff;font-size:3rem;  position: absolute; top:50%;left:100px;" @click="xiaobtn()">&lt;</span>
    <div v-for="(item,index) in arr.data.swiperList" :key="item.id" v-show="index==num">
        <img :src="item.imgUrl" alt="" width="100%" height="100%" >
    </div>
    <span style="color:#fff;font-size:3rem; position: absolute; top:50%;right:100px;"  @click="dabtn()">&gt;</span>
    <ul>
        <li v-for="(item_li,index_li) in btns" @click="now(index_li)" :class="num==index_li?'limg':''" :key="item_li">{{item_li}}</li>
     </ul>
</div>
     <div id="jindian">
      <dl v-for="(item2) in arr.data.iconList" :key="item2.id" style="border:1px solid red; margin:20px; text-align:center;flex-grow:1;">
        <dt><img :src="item2.imgUrl" alt="" width="55vw"></dt>
        <dd v-html="item2.desc" style="margin-left: 5px;"></dd>
      </dl>
    </div>

  <div id="rexiao" style="border:1px solid red; margin:auto">
    <h3 style="background:#eee;text-align:left;height:50px; line-height:50px">热销推荐</h3>
    <div v-for="(item3) in arr.data.recommendList" :key="item3.id" style="border:1px solid pink; ">
        <dl style="width:600px; height:150px; border:1px solid green;">
          <dt style="float:left"><img :src="item3.imgUrl" alt=""></dt>
          <dd style="float:left;line-height:30px; padding-top:30px;padding-left:30px;">
            <h4 v-html="item3.title" style="text-align: left;"></h4>
            <p v-html="item3.desc"></p>
            <p style="width:6rem;height:2rem;background:orange;line-heigth:2rem;color:#fff;border-radius:5px">查看详情</p>
          </dd>
        </dl>
    </div>
  </div>

  
  <div id="lvyou">
     <h3 style="background:#eee;text-align:left;height:50px; line-height:50px">假日旅游</h3> 
    <div >
        <dl v-for="(item4) in arr.data.weekendList" :key="item4.id" style=" width:40vw;border:1px solid green;  flex-grow:1; margin:10px">
          <dt><img :src="item4.imgUrl" alt="" width="100%" height="100%"></dt>
          <dd style="text-align:center">
            <h4 v-html="item4.title"></h4>
            <p v-html="item4.desc"></p>
          </dd>
        </dl> 
    </div>
  </div>
    <!-- {{arr.data.swiperList[0]}} -->
  </div>
</template>

<script>
import datas from '../assets/js/index'
export default {
  data() {
    return {
      num:0,
      arr:datas,
      btns:[1,2,3,4],
    }
  },
  created(){
    setInterval(()=>{
      this.num==this.arr.data.swiperList.length-1?this.num=0:this.num++
    },3000)
  },
  methods:{
    xiaobtn(){
      if(this.num==0){
        this.num=this.arr.data.swiperList.length-1
      }else{
        this.num--
      }
      
    },
    dabtn(){
       if(this.num==this.arr.data.swiperList.length-1){
        this.num=0
      }else{
        this.num++
      }
      },
      now(index){
			this.num=index;
			console.log(this.num)
		},

    },
    
  }

</script>

<style scoped>
@media only screen and (max-width: 768px) {
  #jindian{
    width:66vw;
  }
  #lunbo ul li{
      width:3vw;
      height:5vh;
      line-height:5vh;
  }
} 

*{
  margin: 0;
  padding: 0;
}
#app{
  width:100%;
  margin: auto;
  position: relative;
 
}
 #lunbo{
   position: relative;
      width:100%;
      margin: auto;
      box-sizing: border-box;
    }
#lunbo ul{ 
  position:absolute; 
  bottom: 0px; 
  left:40%;
  }
 #lunbo ul li{
   width:3vw;
   height:7vh;
   background-color: aquamarine;
   border-radius: 50%;
   float: left;
   list-style: none;
   line-height:7vh;
   text-align:center;
   margin: 10px;
   }
  #lunbo ul .limg{
		color: red;
	}
 
#jindian{
  width:70vw;
  margin: auto;
  border: 1px solid blue;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
 
}

#lvyou>div{
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  flex-grow:1;
  margin: auto;
}
</style>
